<template>
	<div style="display: flex;flex-direction: column;background-color: white;" ref="fullscreenElement">
		<div class="topBox">
			<el-row>
				<el-col :span="24">
					<div class="timeBox">
						<div>距离考试结束还有:<span
								style="color: red;font-size: 18px;">&nbsp;&nbsp;{{minutes}}分{{seconds}}秒</span></div>
						<div>
							<el-button type="primary" icon="el-icon-plus" size="medium" @click="saveExamPaper(false)">交卷
							</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="conBox">
			<el-row :gutter="20">
				<el-col :xs="24" :lg="5" :sm="24">
					<div class="answerBox">
						<div class="titleBox">
							<div class="titleNameBox">答题卡</div>
							<div class="smallBox">
								<div class="greenBox">已作答</div>
								<div class="greyBox">未作答</div>
								<div class="yellowBox">当前题目</div>
							</div>
						</div>
						<div class="titleBox" v-for="(value,key) in Object.keys(examList)">
							<div class="titleNameBox" v-if="examList[value].length > 0 && value == 'singleQuestion'">
								单项选择题
							</div>
							<div class="titleNameBox" v-if="examList[value].length > 0 && value == 'multipleQuestion'">
								多项选择题</div>
							<div class="titleNameBox" v-if="examList[value].length > 0 && value == 'judgeQuestion'">判断题
							</div>
							<div class="titleNameBox" v-if="examList[value].length > 0 && value == 'fillQuestion'">填空题
							</div>
							<div class="titleNameBox"
								v-if="examList[value].length > 0 && value == 'subjectiveQuestion'">简答题</div>
							<div class="smallBox">
								<div :class="[chooseId == item.id?'yellowBox':item.userAnswer != '' || item.userAnswer.length != 0?'greenBox':'greyBox']"
									@click="nowId(item.id)" v-for="(item,index) in examList[value]">{{index + 1}}</div>
								<!-- <div class="greyBox" @click="nowId(item.id)" v-for="(item,index) in examList[value]" v-else-if="item.userAnswer != '' || item.userAnswer.length != 0">{{index + 1}}</div> -->
							</div>
						</div>
					</div>
				</el-col>
				<el-col :xs="24" :lg="19" :sm="24">
					<div class="paperContont">
						<div class="topicBox" v-for="(item,index) in examPaper" v-if="item.id == chooseId">
							<div style="background-color: #faf9fe;width: 100%;display: flex;flex-direction: row;justify-content: space-between;"
								:id="item.id">
								<div class="topicTitle">
									<div>{{index + 1}}、{{item.type}}</div>
									<div class="scoreBox">
										<el-tag size="medium">分值:{{item.score}}分</el-tag>
									</div>
								</div>
							</div>
							<div class="topicConBox">
								<div class="topicWord">{{item.name}}</div>
								<div class="checkBoxList" v-if="item.type == '单项选择题'">
									<el-radio-group v-model="item.userAnswer">
										<div v-for="j in item.options">
											<el-radio :label="j.value" border size="medium">{{j.label}}.{{j.value}}
											</el-radio>
										</div>
									</el-radio-group>
								</div>
								<div class="checkBoxList" v-if="item.type == '多项选择题'">
									<el-checkbox-group v-model="item.userAnswer">
										<div v-for="j in item.options">
											<el-checkbox :label="j.value" border size="medium">{{j.label}}.{{j.value}}
											</el-checkbox>
										</div>
									</el-checkbox-group>
								</div>

								<div class="checkBoxList" v-if="item.type == '判断题'">
									<el-radio-group v-model="item.userAnswer">
										<div v-for="j in tfOptions">
											<el-radio :label="j.name" border size="medium">{{j.name}}</el-radio>
										</div>
									</el-radio-group>
								</div>
								<div class="inputBox" v-if="item.type == '填空题' || item.type == '简答题'">
									<div style="font-size: 15px;width:80px;">答案:</div>
									<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="item.userAnswer">
									</el-input>
								</div>
								<!-- 	<div style="display: flex;flex-direction: row;width: 95%;margin:20px auto;">
									<el-button type="primary" icon="el-icon-back" size="medium">上一题</el-button>
									<el-button type="success" icon="el-icon-right" size="medium" @click="next(index)">下一题</el-button>
								</div> -->
							</div>
							<div style="display: flex;flex-direction: row;width: 95%;margin:20px auto;">
								<el-button type="primary" icon="el-icon-back" size="medium" @click="prevQuestion()"
									v-if="!isFirstQuestion">上一题
								</el-button>
								<el-button type="success" icon="el-icon-right" size="medium" @click="nextQuestion()"
									v-if="!isLastQuestion">下一题
								</el-button>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import utils from "@/utils/utils";
	export default {
		data() {
			return {
				//总条数
				total: 0,
				chooseId: '',
				isGoto: false,
				examId: '',
				//分页详情
				examList: {},
				isScore: '',
				examTime: '',
				nowExam: {},
				tfOptions: [{
						id: 1,
						name: '对',
					},
					{
						id: 2,
						name: '错',
					},
				],
				pageInfo: {
					//当前页
					pageNum: 1,
					//分页大小
					pageSize: 10
				},
				exam: {},
				listData: [],
				examInfo: [],
				//倒计时
				countdown: '',
				FormData: {

				},
				//交卷时间
				currentIndex: 0,
				nowTime: '',
				putTime: '',
				submitTimestamp: null,
				minutes: 0,
				seconds: 0,
				intervalId: null,
				linkList: [],
				examType: '',
				scorePoint: 0,
				setCount: 0,
				examName: '',
				screenHiddenCount: 0,
				examPaper: [],
				unify: '',
				//单项选择题
				multipleChoiceList: [],
				isExit: '',
				handTime: '',
				isFullscreen: false,
				multipleChoicesList: [],
				examStartTime: '',
				examUserId: '',
				examPaperId: '',
				examEndTime: '',
				singleQuestion: [],
				startTime: '',
				multipleQuestion: [],
				judgeQuestion: [],
				fillQuestion: [],
				subjectiveQuestion: []
			}
		},
		created() {
			this.examId = localStorage.getItem('examID')
			this.getPageList()
			if (!this.examPaper.some(item => item.id === this.chooseId)) {
				this.chooseId = this.examPaper[0].id; // 如果不存在，则设为第一题的id  
			}
		},
		computed: {
			isFirstQuestion() {
				return this.chooseId == this.examPaper[0].id;
			},
			isLastQuestion() {
				return this.chooseId == this.examPaper[this.examPaper.length - 1].id;
			}

		},
		mounted() {
			document.addEventListener('visibilitychange', this.handleVisibilityChange);
			this.enterFullscreenAutomatically()
			// this.examId = this.$route.query.id
			// this.getPageList()
		},
		beforeDestroy() {

			// 销毁定时器
			if (this.intervalId) {
				clearInterval(this.intervalId);
				this.intervalId = null;
				console.log('定时器已销毁！')
			}
			document.removeEventListener('visibilitychange', this.handleVisibilityChange);
		},
		methods: {
			//记录切屏次数
			handleVisibilityChange() {
				if (document.visibilityState === 'hidden') {
					this.screenHiddenCount += 1;
					this.upDataCard()

					if (this.isExit != '0') {
						this.$message({
							message: '您已切屏幕' + this.screenHiddenCount + '次，超过' + this.setCount + '次将自动收卷！',
							type: 'warning',
							duration: 3000, // 消息显示时间，单位为毫秒
						});
						if (this.screenHiddenCount >= this.setCount) {
							this.overSetNum(true)
						}
					} else {
						this.$message({
							message: '您已切屏幕' + this.screenHiddenCount + '次!',
							type: 'warning',
							duration: 3000, // 消息显示时间，单位为毫秒
						});
					}

				}
			},
			//页面全屏
			enterFullscreenAutomatically() {
				const elem = this.$refs.fullscreenElement;

				if (elem.requestFullscreen) {
					elem.requestFullscreen().then(() => {
						this.isFullscreen = true;
					}).catch((err) => {
						console.error('Fullscreen request denied:', err);
						// 可以在这里处理全屏请求被拒绝的情况，比如显示一个提示信息或添加一个手动全屏的按钮
					});
				} else if (elem.mozRequestFullScreen) {
					/* Firefox */
					elem.mozRequestFullScreen();
					this.isFullscreen = true;
				} else if (elem.webkitRequestFullscreen) {
					/* Chrome, Safari & Opera */
					elem.webkitRequestFullscreen().then(() => {
						this.isFullscreen = true;
					}).catch((err) => {
						console.error('Fullscreen request denied:', err);
					});
				} else if (elem.msRequestFullscreen) {
					/* IE/Edge */
					elem.msRequestFullscreen();
					this.isFullscreen = true;
				}
			},
			//查询考试接口
			getPageList() {
				this.$axios.get("/exam/getById?id=" + this.examId).then(res => {
					console.log('这啥？', res)
					if (res.code == 200) {
						this.exam = res.data
						this.setCount = res.data.examExitCount
						this.isExit = res.data.isExit
						this.examName = res.data.name
						this.examPaperId = res.data.examPaper
						this.examStartTime = res.data.startTime
						this.examEndTime = res.data.endTime
						this.examUserId = res.data.userId
						this.unify = res.data.unify
						this.examType = res.data.isExam
						if (res.data.isExam == '已考试') {
							console.log(res.data.isExam, '状态')
							this.$router.push({
								path: '/front/exam',
							})
						}
					} else {
						this.$router.go(-1);
					}
					if (this.unify == 1) {
						//如果是统一开考,直接用结束时间减去当前时间
						if (this.examType == '立即考试') {
							//如果是第一次考试，就从后台获取试卷
							this.getExamPaper()
						} else if (this.examType == '考试中') {
							this.notFristAdd()
						}
						this.submitTimestamp = JSON.parse(this.changeDate(this.examEndTime))
						this.startCountdown()
					} else {
						if (this.examType == '立即考试') {
							//如果是第一次考试，就从后台获取试卷
							this.getExamTime()
							this.getExamPaper()
						} else if (this.examType == '考试中') {
							this.notFristAdd()
						}
					}
				})
			},
			async setTimeSave() {
				//选择试卷的答案赋值给答题卡
				let a = await this.examPaper.find(obj => obj.id == this.chooseId)
				this.examPaper.forEach((item, index) => {
					if (item.id == a.id) {
						//因为是点击下一题或者上一题触发的，所以肯定不是当前选中id那一题，而是选中的前一题，所以要用下标-1
						this.nowExam = this.examPaper[index - 1]
					}
				})
				const updateAnswer = (questionList) => {
					questionList.forEach(item => {
						if (item.id === this.nowExam.id) {
							item.userAnswer = this.nowExam.userAnswer;

						}
					});
				};
				// 使用该函数更新各种类型题目的答案  
				await updateAnswer(this.examList.singleQuestion);
				await updateAnswer(this.examList.multipleQuestion);
				await updateAnswer(this.examList.judgeQuestion);
				await updateAnswer(this.examList.fillQuestion);
				await updateAnswer(this.examList.subjectiveQuestion);
				this.upDataCard()
			},
			upDataCard() {
				let data = {
					examId: this.examId,
					userAnswers: JSON.stringify(this.examPaper),
					card: JSON.stringify(this.examList),
					exitCount: this.screenHiddenCount
				}
				this.$axios.post("/score/examProcess", data).then(res => {
					console.log('保存试卷返回', res)
					console.log(res.msg, '返回消息')
					if (res.msg == '已交卷') {
						this.$alert('试卷已被强制回收，即将返回考试界面', '', {
							showClose: false,
							center: true,
							callback: action => {
								localStorage.removeItem('startTime');
								// localStorage.removeItem('examID');
								setTimeout(() => {
									this.$router.push({
										path: '/front/exam',
									})
								}, 1000)
							}
						});
					} else {
						this.screenHiddenCount = res.data.exitCount
					}
				})
			},
			addInfo() {
				if (this.unify == 1) {
					this.FormData = {
						card: JSON.stringify(this.examList),
						examId: this.examId,
						isscore: '',
						name: this.examName,
						paperId: this.examPaperId,
						score: '',
						startTime: this.examStartTime,
						endTime: this.examEndTime,
						teacherId: this.examUserId,
						teacherName: '',
						user: '',
						userAnswers: JSON.stringify(this.examPaper),
						userId: '',
						userName: '',
						exitCount: this.screenHiddenCount,
					}
				} else {
					this.FormData = {
						card: JSON.stringify(this.examList),
						examId: this.examId,
						isscore: '',
						name: this.examName,
						paperId: this.examPaperId,
						score: '',
						startTime: this.changeTime(parseInt(localStorage.getItem('startTime'))),
						endTime: this.changeTime(parseInt(localStorage.getItem('startTime')) + this.examTime * 60000),
						teacherId: this.examUserId,
						teacherName: '',
						user: '',
						userAnswers: JSON.stringify(this.examPaper),
						userId: '',
						userName: '',
						exitCount: this.screenHiddenCount
					}
				}
				console.log('第一次上传参数', this.FormData, this.examTime)
				this.$axios.post("/score/add", this.FormData).then(res => {
					console.log('上传返回', res)
					// this.examInfo = res.data
					// this.examPaper = JSON.parse(res.data.userAnswers)
					// this.examList = JSON.parse(res.data.card)
					// this.chooseId = this.examPaper[0].id
					// this.submitTimestamp = this.changeDate(res.data.endTime)
					// this.startCountdown()
				})
			},
			notFristAdd() {
				this.FormData = {
					card: '',
					examId: this.examId,
					isscore: '',
					name: '',
					paperId: this.examPaperId,
					score: '',
					startTime: '',
					endTime: '',
					teacherId: '',
					teacherName: '',
					user: '',
					userAnswers: '',
					userId: '',
					userName: '',
					exitCount: this.screenHiddenCount
				}
				this.$axios.post("/score/add", this.FormData).then(res => {
					console.log('考试中上传返回', res)
					this.examInfo = res.data
					this.examPaper = JSON.parse(res.data.userAnswers)
					this.examStartTime = res.data.startTime
					this.screenHiddenCount = res.data.exitCount
					this.$nextTick(() => {
						this.examList = JSON.parse(res.data.card)
					})
					this.chooseId = this.examPaper[0].id
					this.submitTimestamp = this.changeDate(res.data.endTime)
					this.startCountdown()
				})
			},
			//根据考试id来拿绑定的试卷
			getExamTime() {
				this.$axios.get("/examPaper/getById?id=" + this.examPaperId).then(res => {
					console.log('试卷', res)
					
					this.examTime = res.data.examTime
					this.handTime = res.data.handTime
					this.submitTimestamp = parseInt(localStorage.getItem('startTime')) + this.examTime * 60000
					console.log(this.submitTimestamp, '多久')
					this.startCountdown()
				})
			},
			tfScore() {
				const foundObject = this.examPaper.some(obj => obj.type == '简答题');
				if (foundObject == true) {
					this.isScore = '未评分'
				} else {
					this.isScore = '已评分'
				}
			},
			getScore() {
				this.scorePoint = 0
				this.examPaper.forEach(item => {
					item.userScore = 0
					// if (item.type == '单项选择题' || item.type == '判断题' || item.type == '填空题') {
					// 	if (item.userAnswer == item.answer) {
					// 		item.userScore = item.score
					// 	} else {
					// 		item.userScore = 0
					// 	}
					// }
					// if (item.type == '多项选择题' && item.userAnswer.length != 0) {
					// 	const bArray = item.answer.split(',').map(arr => arr.trim());
					// 	const setB = new Set(bArray);
					// 	const areAllElementsInAInB = item.userAnswer.every(arr => setB.has(arr));
					// 	if (areAllElementsInAInB == true) {
					// 		item.userScore = item.score
					// 	} else {
					// 		item.userScore = 0
					// 	}
					// } else if (item.type == '多项选择题' && item.userAnswer.length == 0) {
					// 	item.userScore = 0
					// }
					// if (item.type == '简答题') {
					// 	item.userScore = 0
					// }
				})
			},
			//切屏次数超过设置次数，直接收卷
			overSetNum(flag) {
				this.tfScore()
				this.getScore()
				let data = {
					examId: this.examId,
					isScore: this.isScore,
					score: this.scorePoint,
					userAnswers: JSON.stringify(this.examPaper)
				}
				this.$axios.post("/score/complete", data).then(res => {
					console.log('自动提交试卷返回', res)
					if (res.code == 200) {
						this.$message.success('考试已结束,即将返回考试界面！')
						localStorage.removeItem('startTime');
						localStorage.removeItem('examID');
						setTimeout(() => {
							this.$router.push({
								path: '/front/exam',
							})
						}, 1000)
						return
					}
				})
			},
			saveExamPaper(flag) {
				this.nowTime = new Date().getTime();
				if (this.examType == '考试中') {
					console.log('考试中开始时间', this.examStartTime)
					this.putTime = parseInt(this.changeDate(this.examStartTime)) + parseInt(this.handTime * 60000)
				} else if (this.examType == '立即考试') {
					this.putTime = parseInt(localStorage.getItem('startTime')) + parseInt(this.handTime * 60000)
				} else if (this.examType == '已考试') {
					this.$message.error('考试已结束，返回考试界面')
					setTimeout(() => {
						this.$router.push({
							path: '/front/exam',
						})
					}, 1000)
					return
				}
				// console.log(this.examPaper, '交卷试卷')
				// console.log('交卷时间', this.changeTime(this.putTime))
				//计算剩余交卷时间
				if (this.nowTime > this.putTime) {
					console.log(this.putTime, this.examType, '提交时间')
					//处理交卷
					if (flag == true) {
						console.log(this.examPaper, '考试试卷')
						this.tfScore()
						this.getScore()
						let data = {
							examId: this.examId,
							isScore: this.isScore,
							score: this.scorePoint,
							userAnswers: JSON.stringify(this.examPaper)
						}
						this.$axios.post("/score/complete", data).then(res => {
							console.log('自动提交试卷返回', res)
							if (res.code == 200) {
								this.$message.success('考试已结束,即将返回考试界面！')
								localStorage.removeItem('startTime');
								localStorage.removeItem('examID');
								setTimeout(() => {
									this.$router.push({
										path: '/front/exam',
									})
								}, 1000)
								return
							}
						})

					} else {
						console.log(this.examPaper, '考试试卷')
						this.tfScore()
						this.getScore()
						let data = {
							examId: this.examId,
							isScore: this.isScore,
							score: this.scorePoint,
							userAnswers: JSON.stringify(this.examPaper)
						}
						this.$confirm('提交试卷之后将不可更改，确认要提交试卷吗？', '提示', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning'
						}).then(() => {
							this.$axios.post("/score/complete", data).then(res => {
								console.log('手动提交试卷返回', res)
								if (res.code == 200) {
									this.$message.success('交卷成功,即将返回考试界面！')
									localStorage.removeItem('startTime');
									localStorage.removeItem('examID');
									setTimeout(() => {
										this.$router.push({
											path: '/front/exam',
										})
									}, 2000)
								}
							})
						}).catch(() => {
							this.$message({
								type: 'info',
								message: '已取消提交'
							});
						});
					}
				} else {
					console.log(this.putTime, this.nowTime, 123)
					let lastTime = Math.ceil((this.putTime - this.nowTime) / 60000)

					this.$message.error('距离交卷时间还剩' + lastTime + '分钟')
				}
			},
			startCountdown() {
				// 清除之前的倒计时（如果有的话）  
				if (this.intervalId) {
					clearInterval(this.intervalId);
				}
				console.log(typeof(this.submitTimestamp), '考试结束时间')
				// 计算剩余时间（毫秒）  
				const remainingTime = this.submitTimestamp - Date.now();

				// 如果时间已经过了，则不启动倒计时  
				if (remainingTime <= 0) {
					console.log('倒计时', remainingTime)
					clearInterval(this.intervalId);
					console.log('指定时间已过');
					//自动交卷
					this.saveExamPaper(true)
					return
				}
				// 更新分钟和秒  
				this.updateCountdown(remainingTime);
				// 每秒更新一次倒计时  
				this.intervalId = setInterval(() => {
					const newRemainingTime = this.submitTimestamp - Date.now();
					if (newRemainingTime > 0) {
						this.updateCountdown(newRemainingTime);
					} else {
						// 倒计时结束，清除间隔  
						clearInterval(this.intervalId);
						this.intervalId = null;
						// 这里可以添加倒计时结束后的逻辑  
						this.saveExamPaper(true)
					}
				}, 1000);
			},
			updateCountdown(remainingTime) {
				const totalSeconds = Math.floor(remainingTime / 1000);
				this.minutes = Math.floor(totalSeconds / 60);
				this.seconds = totalSeconds % 60;
			},
			//年月日时分秒转时间戳
			changeDate(dateTimeString) {
				const year = parseInt(dateTimeString.substring(0, 4), 10);
				const month = parseInt(dateTimeString.substring(5, 7), 10) - 1;
				const day = parseInt(dateTimeString.substring(8, 10), 10);
				const hours = parseInt(dateTimeString.substring(11, 13), 10);
				const minutes = parseInt(dateTimeString.substring(14, 16), 10);
				const seconds = parseInt(dateTimeString.substring(17, 19), 10);

				// 创建Date对象  
				const date = new Date(year, month, day, hours, minutes, seconds);
				return date.getTime();
			},
			//时间戳转年月日时分秒
			changeTime(currentTime) {
				// 提取并格式化年、月、日、时、分、秒  
				let date = new Date(currentTime);
				let year = date.getFullYear();
				let month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以需要加1  
				let day = String(date.getDate()).padStart(2, '0');
				let hours = String(date.getHours()).padStart(2, '0');
				let minutes = String(date.getMinutes()).padStart(2, '0');
				let seconds = String(date.getSeconds()).padStart(2, '0');

				// 将格式化后的年、月、日、时、分、秒拼接成完整的日期时间字符串  
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			getQuestionIndexById(id) {
				return this.examPaper.findIndex(item => item.id === id);
			},
			prevQuestion() {
				const currentIndex = this.getQuestionIndexById(this.chooseId);
				if (currentIndex > 0) {
					this.chooseId = this.examPaper[currentIndex - 1].id;
				} else {
					this.chooseId = this.examPaper[this.examPaper.length - 1].id; // 循环到最后一题  
				}
				this.$nextTick(() => {
					this.setTimeSave()
				})
			},
			nextQuestion() {
				const currentIndex = this.getQuestionIndexById(this.chooseId);
				if (currentIndex < this.examPaper.length - 1) {
					this.chooseId = this.examPaper[currentIndex + 1].id;
				} else {
					this.chooseId = this.examPaper[0].id; // 循环到第一题
				}
				this.$nextTick(() => {
					this.setTimeSave()
				})

			},
			//根据试卷拿试卷的题目
			getExamPaper() {
				this.$axios.post('/exam/getExamPaper', this.exam).then(res => {
					this.examList = res.data
					console.log(this.examList, 2387289)
					//如果已经登录过考试，就直接拿本地的试卷和答案，不在处理试卷

					//单项选择题
					if (this.examList.singleQuestion.length > 0) {
						this.examList.singleQuestion.forEach(item => {
							this.examPaper.push(item)
						})
					}
					//多项选择题
					if (this.examList.multipleQuestion.length > 0) {
						this.examList.multipleQuestion.forEach(item => {
							this.examPaper.push(item)
						})
					}
					//判断题
					if (this.examList.judgeQuestion.length > 0) {
						this.examList.judgeQuestion.forEach(item => {
							this.examPaper.push(item)
						})
					}
					//填空题
					if (this.examList.fillQuestion.length > 0) {
						this.examList.fillQuestion.forEach(item => {
							this.examPaper.push(item)
						})
					}
					//简答题
					if (this.examList.subjectiveQuestion.length > 0) {
						this.examList.subjectiveQuestion.forEach(item => {
							this.examPaper.push(item)
						})
					}
					console.log(this.examPaper, '刚组好试卷')
					this.examPaper.forEach(item => {
						item.userScore = 0
						if (item.type == '单项选择题') {
							if (item.options.length > 0) {
								item.options = JSON.parse(item.options)
								this.$set(item, "userAnswer", '')
							}
						} else if (item.type == '多项选择题') {
							if (item.options.length > 0) {
								item.options = JSON.parse(item.options)
							}
						}
						if (item.type == '多项选择题') {
							this.$set(item, "userAnswer", [])
						} else {
							this.$set(item, "userAnswer", '')
						}
					})
					console.log(this.examPaper, '添加东西')
					this.chooseId = this.examPaper[0].id
					this.addInfo()
				})
			},
			//处理单选多选选项数组
			transformedArray(option) {
				return option.map(item => {
					// 将每个字符串按“：”分割成两部分  
					const [label, value] = item.split(':');
					// 返回一个对象，包含 label 和 value 属性 
					return {
						label,
						value
					};
				});
			},
			nowId(id) {
				console.log(this.examPaper, '试卷')
				this.chooseId = id
				this.setTimeSave()
			}

		}
	}
</script>

<style scoped>
	.timeBox {
		padding: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.fullscreen-content {
		/* 您可以在这里添加全屏内容的样式 */
		background-color: white
	}

	.topicConBox {
		width: 100%;
	}

	.el-radio-group {
		width: 100%;
	}

	.el-radio-group .el-radio:last-child {
		width: 100%;
		margin-bottom: 10px;
	}

	.el-checkbox.is-bordered.el-checkbox--mini {
		width: 100%;
		margin-bottom: 10px;
	}

	.checkBoxList {
		padding: 10px 20px 10px 20px;
	}

	.inputBox {
		padding: 10px 20px 10px 20px;
		display: flex;
		flex-direction: row;
		margin: 10 auto;
	}

	.topicWord {
		padding: 10px 20px 10px 20px;
	}


	.scoreBox {
		margin: 0px 10px 0px 10px;
	}

	.topicTitle {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px 20px 10px 20px;
	}

	.topicBox {
		width: 95%;
		margin: 20px auto;
		border: solid 1px gainsboro;
		display: flex;
		flex-direction: column;
	}

	.paperContont {
		height: calc(100vh - 150px);
		overflow-y: scroll;
		box-shadow: 0px 0px 5px 2px gainsboro;
	}

	.titleNameBox {
		margin-top: 10px;
		margin-bottom: 5px;
		background-color: #eeeeee;
		padding: 5px 20px 5px 20px;
		text-align: center;
		font-size: 14px;
	}

	.smallBox {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 10px;
	}

	.titleBox {
		width: 90%;
		margin: 0px auto;
		display: flex;
		flex-direction: column;
	}

	.topBox {
		width: 98%;
		margin: 20px auto;
		border-radius: 5px;
		box-shadow: 0px 0px 5px 2px gainsboro;
	}

	.conBox {	
		width: 98%;
		margin: 0 auto;
	}

	.questionBox {
		height: calc(100vh - 150px);
		box-shadow: 0px 0px 5px 2px gainsboro;
		border-radius: 5px;
	}

	.answerBox {
		height: calc(100vh - 150px);
		box-shadow: 0px 0px 5px 2px gainsboro;
		border-radius: 5px;
		overflow-y: scroll;
	}

	::-webkit-scrollbar {
		width: 4px;
		/*  设置纵轴（y轴）轴滚动条 */
		height: 4px;
		/*  设置横轴（x轴）轴滚动条 */
	}

	/* 滚动条滑块（里面小方块） */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: #409EFF;
	}

	/* 滚动条轨道 */
	::-webkit-scrollbar-track {
		border-radius: 0;
		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
		background: gainsboro;
	}

	.greenBox {
		background-color: gray;
		border: solid 1px #dbf9f0;
		color: white;
		padding: 6px 10px;
		font-size: 12px;
		cursor: pointer;
		margin: 2px;
		box-sizing: border-box;
	}

	.greyBox {
		background-color: white;
		border: solid 1px gray;
		color: black;
		padding: 6px 10px;
		font-size: 12px;
		cursor: pointer;
		margin: 2px;
		box-sizing: border-box;
	}

	.yellowBox {
		background-color: #409EFF;
		border: solid 1px #79bbff;
		color: white;
		font-size: 12px;
		padding: 6px 10px;
		cursor: pointer;
		margin: 2px;
		box-sizing: border-box;
	}
</style>
